﻿import React from 'react'
import { Link, NavLink } from 'react-router-dom'

export default function Header() {
  const activeStyles = {
    fontWeight: 'bold',
    textDecoration: 'underline',
    color: '#161616'
  }
  const getStyle = ({ isActive }: { isActive: boolean }) =>
    isActive ? activeStyles : {}

  return (
    <header>
      <Link className="site-logo" to="/">
        #VanLife
      </Link>
      <nav>
        <NavLink to="/" style={getStyle}>
          Home
        </NavLink>
        <NavLink to="/recommend" style={getStyle}>
          Recommend
        </NavLink>
      </nav>
    </header>
  )
}
